<span class="prefix-icon">
  <ix-icon name="search"></ix-icon>
</span>

<input
  #searchControl
  matInput
  ixTest="search"
  class="input"
  [placeholder]="'Search' | translate"
  [ngModel]="query()"
  (ngModelChange)="queryChange.emit($event)"
  (keydown.enter)="runSearch.emit()"
/>

@if (allowAdvanced()) {
  <a
    class="switch-link"
    ixTest="switch-to-advanced"
    tabindex="0"
    (click)="switchToAdvanced.emit()"
    (keydown.enter)="$event.preventDefault(); switchToAdvanced.emit()"
  >
    {{ 'Switch To Advanced' | translate }}
  </a>
}

@if (searchControl.value) {
  <span
    class="reset-icon reset-input"
    (click)="resetInput()"
  >
    <ix-icon
      name="mdi-close-circle"
      tabindex="0"
      (keydown.enter)="$event.preventDefault(); resetInput()"
    ></ix-icon>
  </span>
}
